{extend name="member/common/member_layout" /}

{block name="content"}

<script type="text/javascript" src="__SITE_RESOURCE__/js/jquery.Jcrop/jquery.Jcrop.js"></script>
<link href="__SITE_RESOURCE__/js/jquery.Jcrop/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" id="cssfile2" />
<div class="wrap">
    <div class="tabmenu">

        <!-- submenu-->
        {include file="member/common/submenu"}

    </div>
    <?php if ($newfile == ''){?>
    <form action="/member/Information/upload" enctype="multipart/form-data" id="form_avaster" method="post">
        <input type="hidden" name="form_submit" value="ok" />
        <div class="ncm-default-form">
            <dl>
                <dt>头像预览：</dt>
                <dd>
                    <div class="user-avatar"><span><img src="{$member_avatar|default='__UPLOAD_PATH__/shop/common/default_user_portrait.gif'}" alt="" nc_type="avatar" /></span></div>
                    <p class="hint mt5">
                        完善个人信息资料，上传头像图片有助于您结识更多的朋友。<br /><span style="color:orange;">头像默认尺寸为120x120像素，请根据系统操作提示进行裁剪并生效。</span>
                    </p>
                </dd>
            </dl>
            <dl>
                <dt>更换头像：</dt>
                <dd>
                    <div class="ncm-upload-btn"> <a href="javascript:void(0);"><span>
            <input type="file" hidefocus="true" size="1" class="input-file" name="pic" id="pic" file_id="0" multiple="" maxlength="0"/>
            </span>
                        <p><i class="icon-upload-alt"></i>图片上传</p>
                        <input id="submit_button" style="display:none" type="button" value="&nbsp;" onClick="submit_form($(this))" />
                    </a> </div>
                </dd>
            </dl>
        </div>
    </form>
    <?php }else{?>
    <form action="/member/Information/cut" id="form_cut" method="post">
        <input type="hidden" name="form_submit" value="ok" />
        <input type="hidden" id="x1" name="x1" />
        <input type="hidden" id="x2" name="x2" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="y1" name="y1" />
        <input type="hidden" id="y2" name="y2" />
        <input type="hidden" id="h" name="h" />
        <input type="hidden" id="newfile" name="newfile" value="{$newfile}" />
        <div class="pic-cut-120">
            <div class="work-title">工作区域</div>
            <div class="work-layer">
                <p><img id="nccropbox" src="{$newfile}"/></p>
            </div>
            <div class="thumb-title">裁切预览</div>
            <div class="thumb-layer">
                <p><img id="preview" src="{$newfile}"/></p>
            </div>
            <div class="cut-help">
                <h4>操作帮助</h4>
                <p>请在工作区域放大缩小及移动选取框，选择要裁剪的范围，裁切宽高比例固定；裁切后的效果为右侧预览图所显示；保存提交后生效。</p>
            </div>
            <div class="cut-btn">
                <input type="button" id="ncsubmit" class="submit" value="确认提交" />
            </div>
        </div>
    </form>
    <?php }?>
</div>
<script type="text/javascript">
    $(function(){
        <?php if ($newfile != ''){?>
            function showPreview(coords)
            {
                if (parseInt(coords.w) > 0){
                    var rx = 120 / coords.w;
                    var ry = 120 / coords.h;
                    $('#preview').css({
                        width: Math.round(rx * <?php echo $width;?>) + 'px',
                        height: Math.round(ry * <?php echo $height;?>) + 'px',
                        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                        marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
                }
                $('#x1').val(coords.x);
                $('#y1').val(coords.y);
                $('#x2').val(coords.x2);
                $('#y2').val(coords.y2);
                $('#w').val(coords.w);
                $('#h').val(coords.h);
            }
            $('#nccropbox').Jcrop({
                aspectRatio:1,
                setSelect: [ 0, 0, 120, 120 ],
                minSize:[50, 50],
                allowSelect:0,
                onChange: showPreview,
                onSelect: showPreview
            });
            $('#ncsubmit').click(function() {
                var x1 = $('#x1').val();
                var y1 = $('#y1').val();
                var x2 = $('#x2').val();
                var y2 = $('#y2').val();
                var w = $('#w').val();
                var h = $('#h').val();
                if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
                    alert("您必须先选定一个区域");
                    return false;
                }else{
                    $('#form_cut').submit();
                }
            });
        <?php }else{?>
            $('#pic').change(function(){
                var filepath=$(this).val();
                var extStart=filepath.lastIndexOf(".");
                var ext=filepath.substring(extStart,filepath.length).toUpperCase();
                if(ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
                    alert("文件类型错误，请选择图片文件（png|gif|jpg|jpeg）");
                    $(this).attr('value','');
                    return false;
                }
                if ($(this).val() == '') return false;
                $("#form_avaster").submit();
            });
        <?php }?>
    });
</script>

{/block}
